<template>
    <div class="xxx">
        <!--  -->
        <hheader :mheader="{title:'',showBack:true}">
            <span slot="rightContent">注册</span>
        </hheader>

        <!--  -->
        <hscroll class="h-container has-header has-footer">
            <div class="main">
                <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
                    <van-list v-model="loading" :finished="finished" :immediate-check="false" :offset="50" @load="onLoad">
                        <p v-for="(v,i) in listData" :key="i">{{v}}</p>
                    </van-list>
                </van-pull-refresh>
            </div>
        </hscroll>

        <!--  -->
        <hfooter></hfooter>
    </div>
</template>

<script>
export default {
    data() {
        return {
            isLoading: false, //下拉刷新 效果
            listData: [1, 2, 3, 4, 5, 6, 7, 8, 9],
            pageNumber: 0, //分页
            pageSize: this.$store.state.data.pageSize
                ? this.$store.state.data.pageSize
                : 10, //每页的条数
            loading: false, //上拉加载 效果
            finished: false // 是否关闭上拉加载效果
        };
    },
    created() {},
    mounted() {},
    methods: {
        //下拉刷新
        onRefresh() {
            //数据都是异步修改的，所以加延时
            setTimeout(() => {
                this.pageNumber = 0;
                this.listData = [];
                this.init();
            }, 200);
        },
        onLoad() {
            // 异步更新数据 //数据都是异步修改的，所以加延时
            setTimeout(() => {
                console.log("onLoad");
                this.init();
                // 加载状态结束
                this.loading = false;
                // 数据全部加载完成
                if (this.listData.length >= 40) {
                    this.finished = true; //关闭 上拉加载 效果
                }
            }, 200);
        },
        init() {
            this.pageNumber += 1;
            //加载数据
            for (let i = 0; i < 3; i++) {
                this.listData.push(i);
            }
            console.log("加载数据", this.isLoading);
            this.isLoading = false; //关闭 下拉刷新 效果
            console.log("加载数据", this.isLoading);
        }
    },
    computed: {},
    filters: {},
    watch: {}
};
</script>

<style lang="scss">
.xxx {
    .main {
    }
}
</style>
